<template>
  <div>
    <h1>开发者</h1>
    <!-- 新增 -->
    <el-dialog
      title="新增开发者信息"
      :visible.sync="dialogAddStatusVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :hide-required-asterisk="true" :status-icon="true"> </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddStatusVisible = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="addDevAleady()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 改变状态 -->
    <el-dialog
      title="改变状态"
      :visible.sync="dialogChangeStatusVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-radio v-model="row.father_power" label="0">正常</el-radio>
      <el-radio v-model="row.father_power" label="1">禁用</el-radio>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogChangeStatusVisible = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="changeStatusAleady()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-card class="el-card" shadow="hover" :body-style="{ padding: '0px' }">
      <el-input
        class="input1"
        placeholder="请输入要查询的用户"
        prefix-icon="el-icon-search"
        v-model="msgCheck"
        clearable
      ></el-input>
      <el-button type="primary" class="bnt1" @click="devloperCheck()"
        >查询</el-button
      >
      <!-- 表格 -->
      <el-table :data="list" border style="width: 100%">
        <el-table-column
          prop="father_idnumber"
          label="开发者身份证号"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="father_login_date"
          label="开发者注册日期"
          width="100px"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="father_name"
          label="开发者公司名称"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="father_power"
          label="开发者权限"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.father_power === '0' ? '正常' : '封号' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="father_real_name"
          label="开发者真实姓名"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="father_state"
          label="开发者状态"
          header-align="center"
          align="center"
        >
          <!-- 插槽三元表达式 -->
          <template slot-scope="scope">
            <span>{{
              scope.row.father_state === 0 ? '待审核' : '已审核'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="user_id"
          label="用户ID"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="administrators_name"
          label="管理员名称"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="father_audit_date"
          label="审核日期"
          header-align="center"
          align="center"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="warning"
              plain
              @click="changeStatus(scope.$index, scope.row)"
              size="mini"
              >更改状态</el-button
            >
          </template>
        </el-table-column>
      </el-table>
        <el-pagination
        background
        layout="prev, pager, next"
        :total="title"
        :page-size="1"
        @prev-click="prev"
        @next-click="next"
        @current-change="currentPage"
      >
      </el-pagination>
    </el-card>

  </div>
</template>
<script>
import util from '../lib/index.js';
export default {
  data() {
    return {
      list: [],
      msg: '',
      msgCheck: '',
      dialogChangeStatusVisible: false,
      row: [],
      dialogAddStatusVisible: false,
      radio: '0',
      title:0,
    };
  },
  methods: {
    //查询
    devloperCheck() {
      if (this.msgCheck !== '') {
        util
          .fatherCheck({
            app_father_id: this.msgCheck,
          })
          .then((res) => {
            this.list = res.data.data;
            console.log(res);
          });
      } else if (this.msgCheck === '') {
        util
          .fatherAll({
            pages: 1,
          })
          .then((res) => {
            console.log(res);
            this.list = res.data.data;
            this.list;
          });
      }
    },
    //新增
    addDev() {
      this.dialogAddStatusVisible = true;
    },
    addDevAleady() {
      this.dialogAddStatusVisible = false;
      console.log(this.radio);
    },
    //更改状态
    changeStatus(index, row) {
      this.dialogChangeStatusVisible = true;
      row.father_power = row.father_power + '';
      this.row = row;
      console.log('row', this.row);
    },
    //更改状态弹窗关闭
    changeStatusAleady() {
      console.log(this.row);
      util
        .fatherChange({
          app_father_id: this.row.app_father_id,
          father_state: this.row.father_state,
          father_audit_date: this.row.father_audit_date,
          administrators_id: this.row.administrators_id,
          father_audit_text: this.row.father_audit_text,
          father_power: parseInt(this.row.father_power),
        })
        .then((res) => {
          util
            .fatherAll({
              pages: 1,
              father_power:0,
            })
            .then((res) => {
              console.log(res);
              this.list = res.data.data;
                this.title=parseInt(res.data.msg);
              for (let i = 0; i < this.list.length; i++) {
                this.list[i].father_power = this.list[i].father_power + '';
              }
            });
        });
      this.dialogChangeStatusVisible = false;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //分页
    //上一页
     prev(val) {
      console.log(val);
      this.page = parseInt(val);
      util
      .fatherAll({
        pages: val,
         father_power:0,
      })
      .then((res) => {
        this.list = res.data.data;
        console.log(res)
        for (let i = 0; i < this.list.length; i++) {
          this.list[i].father_power = this.list[i].father_power + '';
        }
      });
    },
    //下一页
    next(val) {
      console.log(val);
      this.page = parseInt(val);
     util
      .fatherAll({
        pages: val,
         father_power:0,
      })
      .then((res) => {
        this.list = res.data.data;
        console.log(res)
        for (let i = 0; i < this.list.length; i++) {
          this.list[i].father_power = this.list[i].father_power + '';
        }
      });
    },
    //当前页
    currentPage(val) {
      this.page = parseInt(val);
      util
      .fatherAll({
        pages: val,
         father_power:0,
      })
      .then((res) => {
        this.list = res.data.data;
        console.log(res)
        for (let i = 0; i < this.list.length; i++) {
          this.list[i].father_power = this.list[i].father_power + '';
        }
      });
    },
  },

  mounted() {
    util
      .fatherAll({
        pages: 1,
         father_power:0,
      })
      .then((res) => {
        this.list = res.data.data;
        console.log(res)
        this.title=parseInt(res.data.msg);
        console.log(this.title)
        for (let i = 0; i < this.list.length; i++) {
          this.list[i].father_power = this.list[i].father_power + '';
        }
      });
  },
};
</script>
<style  scoped>
.input1 {
  width: 400px;
  margin-bottom: 30px;
}
.bnt1 {
  margin-bottom: 30px;
}
.el-card {
  width: 1000px;
  margin-left: 20px;
}
</style>